<!--
 * @Author: 余铖
 * @Date: 2020-03-27 16:10:48
 * @LastEditors: 余铖
 * @LastEditTime: 2020-04-01 17:35:51
 * @Description: 调查对象管理
 -->
 <template>
	<div class=''>
		<Card>
			<Form ref="search" :model="searchData" :label-width="80">
				<Row>
					<i-col :xs="24" :md="12" :lg="6">
						<FormItem label="调查名称" prop="inquireName">
							<Input v-model="searchData.inquireName" suffix="ios-search" placeholder="请输入用户名称" style="width: auto">
							<Icon type="ios-search" slot="suffix" />
							</Input>
						</FormItem>
					</i-col>
					<i-col :xs="24" :md="12" :lg="6">
						<FormItem label="调查来源" prop="inquireSource">
							<Input v-model="searchData.inquireSource" suffix="ios-search" placeholder="请输入手机号" style="width: auto">
							<Icon type="ios-search" slot="suffix" />
							</Input>
						</FormItem>
					</i-col>
					<i-col :xs="24" :md="12" :lg="6">
						<FormItem>
							<Button v-if="btnAccess.query" type="primary" :loading="searchLoading" @click="handleSubmit('search')">提交搜索</Button>
							<Button @click="submitReset('search')" style="margin:0 20px">重置搜索</Button>
						</FormItem>
					</i-col>
				</Row>
			</Form>
		</Card>
		<Card style="margin-top:15px">
			<Row>
				<Button v-if="btnAccess.add" type="info" @click="survey('add')" style="margin:10px 10px">添加调查名称</Button>
			</Row>
			<Table border ref="selection" :columns="columns4" :data="data1">
				<template slot-scope="{ row, index }" slot="number">
					<strong>{{ index+1 }}</strong>
				</template>

				<template slot-scope="{ row }" slot="name">
					<strong>{{ row.name }}</strong>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button v-if="btnAccess.upd" type="primary" size="default" style="margin: 5px" @click="survey('update',row)">编辑调查名称</Button>
					<Button v-if="btnAccess.upd" type="success" size="default" style="margin: 5px" @click="editObject(row)">编辑调查对象</Button>
					<Button v-if="btnAccess.del" type="error" size="default" style="margin: 5px" @click="del(row.inqId)">删除</Button>
				</template>
			</Table>
			<!-- <div style="margin-top:20px;margin-left:35%">
				<Page @on-change="pageNumberChange" :page-size="pageSize" :total="pageTotal" show-elevator />
			</div> -->
		</Card>
		<Dialog ref="customModal" @OK="query('query')" />
		<EditObject ref="EditObject" />
	</div>
</template>
 
 <script>
import Dialog from "./components/Dialog";
import EditObject from "./components/EditObject";
import { requestData } from "@/api/personal.js";

export default {
	components: {
		Dialog,
		EditObject
	},
	data() {
		//这里存放数据
		return {
			columns4: [
				{
					type: "selection",
					width: 60,
					align: "center"
				},
				{
					title: "分类编号",
					key: "name",
					slot: "number"
				},
				{
					title: "调查名称",
					key: "inquireName"
				},
				{
					title: "调查来源",
					key: "inquireSource"
				},
				{
					title: "设置",
					slot: "action",
					width: 420,
					align: "center"
				}
			],
			data1: [],

			inqObjFilter: {
				// optionType: "query"
			},
			// form 数值
			searchData: {
				optionType: "query",
				inquireName: "",
				inquireSource: ""
			},

			pageSize: 1, // 当前页码,
			pageNumber: 5,
			pageTotal: 100, // 条数

			// 菜单权限 默认配置
			btnAccess: {
				add: true,
				del: true,
				upd: true,
				query: true
			},
			searchLoading: false // 搜索Loading
		};
	},
	created() {
		this.query("query");
	},
	mounted() {
		// 获取按钮权限
		let btnAccess = sessionStorage.getItem("btnaccess");
		this.globalFunction(btnAccess);

		this.$nextTick(function() {
			document.getElementsByClassName(
				"ivu-table-overflowX"
			)[0].style.cssText = "overflow-x: hidden !important";
		});
	},
	//方法集合
	methods: {
		/**
		 * @description: 查询
		 * @param {type}
		 * @return:
		 */
		handleSubmit(name) {
			this.$refs[name].validate(valid => {
				if (valid) {
					this.query("query");
				} else {
					this.$Message.error("Fail!");
				}
			});
		},
		/**
		 * @description: 重置
		 * @param name {String}
		 * @return:
		 */
		submitReset(name) {
			this.searchLoading = false;
			this.$refs[name].resetFields();
		},
		/**
		 * @description: 添加 编辑
		 * @param type {String}
		 * @param data {Object}
		 * @return:
		 */
		survey(type, data) {
			if (type == "add") {
				this.$refs.customModal.modal1 = true;
				this.$refs.customModal.title = "添加调查名称";
			} else {
				this.$refs.customModal.modal1 = true;
                this.$refs.customModal.title = "编辑调查名称";
                this.$refs.customModal.formItem= {
                    optionType: "update",
                    inquireName:  data.inquireName,
                    inquireSource:  data.inquireSource,
                    inqId: data.inqId
                }
			}
		},
		/**
		 * @description: 编辑对象
		 * @param {type}
		 * @return:
		 */
		editObject(data) {
            this.$refs.EditObject.modal1 = true;
            this.$refs.EditObject.itemData= {
                optionType: "query",
                inqId: data.inqId,
                inquireSource: data.inquireSource
            }
            this.$refs.EditObject.tableData= [];
            this.$refs.EditObject.initData();
		},

		query(type, data) {
			if (type == "query") {
				this.inqObjFilter = Object.assign(this.inqObjFilter, {
					// pageSize: this.pageSize,
					// pageNumber: this.pageNumber,
					...this.searchData
				});
			}

			requestData({
				formData: { inqObjFilter: this.inqObjFilter },
				url: "/exam/User/inquireObj"
			})
				.then(result => {
					// console.log(result, "resultresultresult");
                    this.tabelLoading = false;
                    
					if (result.data.code === "200") {
						if (type == "query") {
                            this.data1 = result.data.results.data;
                            this.pageTotal = this.data1.length/this.pageNumber;
						} else if(type == "del") {
                            this.$Message.success("删除成功");
                            this.$Modal.remove();
                            this.query('query');
                            delete this.inqObjFilter.inqId;
                        }
					} else {
						this.$Message.error("失败");
                    }
                    
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 页码
		pageNumberChange(pageNumber) {
            this.pageSize = pageNumber;
            this.query('query');
        },
        del(data) {
            this.$Modal.confirm({
                title: "删除",
                content: "<p>删除完成后将无法恢复</p>",
                loading: true,
                onOk: () => {
                    this.inqObjFilter = {
                        inqId: data,
                        optionType: 'del',
                    };
                    this.query('del');
                },
                onCancel: () => {
                    return;
                }
            });
        }
	}
};
</script>
<style scoped>
</style>
